/**
 * 沉浸式导航栏
 */
interface navbarConfig {
	bgColor: string
	title: string
	color: string
	show: boolean
}

export default function () {
	let navbarcfg = ref<navbarConfig>({
		bgColor: "transparent",
		title: "",
		color: "",
		show: false,
	})
	let pageTitle = ref<string>("")
	let titleColor = ref<string>("#000")
	let scrollTop = ref<number>(200)
	let durationHeight = ref<number>(100)
	let hasDefaultTitle = ref<boolean>(false)
	let defaultNavbarcfg = reactive<navbarConfig>({} as navbarConfig)

	const pageScroll = (top: number) => {
		if (top > scrollTop.value - durationHeight.value) {
			let opacity = Math.min((top + durationHeight.value - scrollTop.value) / durationHeight.value, 1)
			navbarcfg.value = {
				bgColor: `rgba(251,251,252,${opacity})`,
				color: `rgba(0,0,0,${opacity})`,
				title: pageTitle.value,
				show: opacity === 1,
			}
		} else {
			navbarcfg.value.title = defaultNavbarcfg.title
			navbarcfg.value.bgColor = defaultNavbarcfg.bgColor
			navbarcfg.value.color = defaultNavbarcfg.color
			navbarcfg.value.show = defaultNavbarcfg.show
		}
	}

	onMounted(() => {
		defaultNavbarcfg = hasDefaultTitle.value
			? {
					bgColor: "transparent",
					title: pageTitle.value,
					color: titleColor.value,
					show: true,
			  }
			: { bgColor: "transparent", title: "", color: titleColor.value, show: false }
		navbarcfg.value.title = defaultNavbarcfg.title
		navbarcfg.value.bgColor = defaultNavbarcfg.bgColor
		navbarcfg.value.color = defaultNavbarcfg.color
		navbarcfg.value.show = defaultNavbarcfg.show
	})

	return { navbarcfg, pageTitle, scrollTop, durationHeight, hasDefaultTitle, titleColor, pageScroll }
}
